<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/myHomePage.css">
    <title>我的主页</title>
</head>
<body>
    <div class="main-content">
        <header class="title">
            <p>穿云箭</p>
            <div class="clearFix" id="title-nav">
                <div class="title-left">
                    <div class="select-mode">
                        <p>代理模式</p>
                        <div class="clearFix select-bgc">
                            <span>
                                <input value="手动" id="1" checked='checked' type="checkbox" name="model" onclick="seletMD(this)">
                                <label for="1">手动</label>
                            </span>
                            <span>
                                 <input value="自动" id='2' type="checkbox" name="model" onclick="seletMD(this)">
                                <label for="2">自动</label>
                            </span>
                            <span>
                                <input value="全局" id="3" type="checkbox" name="model" onclick="seletMD(this)">
                                <label for="3">全局</label>
                            </span>
                        </div>
                    </div>
                    <div class="select-speed">
                        <p>节点调速</p>
                        <div class="clearFix select-bgc">
                            <span>
                                <input value="正常" id="4" checked='checked' type="checkbox" name="speed" onclick="speed(this)">
                                <label for="4">正常</label>
                            </span>
                            <span>
                                <input value="视频" id="5"  type="checkbox" name="speed" onclick="speed(this)">
                                <label for="5">视频</label>
                            </span>
                            <span>
                                <input value="游戏" id="6"  type="checkbox" name="speed" onclick="speed(this)">
                                <label for="6">游戏</label>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="title-right">
                    <div>
                        <img id="imgDown" onclick="shutdown()" src="../images/endRED.png">
                    </div>
                </div>
            </div>
        </header>
        <!--主体内容-->
        <div class="content">
            <!--用户信息-->
            <div class="user-info" >
                <div class="list" onclick="pull()" >
                    <span>marryna</span>
                    <span style="text-align: right;">
                        <img id="first" src="../images/pull-down.png" height="24px" width="24px">
                    </span>
                </div>
                <div class="pull-down-first clearFix" id="one">
                    <!--左侧头像-->
                    <div class="info-left">
                        <div>
                            <a href="../html/personalData.html"><img src="../images/rose.jpg"></a>
                        </div>
                    </div>
                    <!--右侧详细信息-->
                    <div class="info-right">
                        <p>套餐</p>
                        <div>
                            <p class="flow-text">流量： <span>360GB/1024GB</span></p>
                            <div id="progress-bar">
                                <p id="barP"></p>
                            </div>
                        </div>
                        <div class="device">
                            <span id="device-one">设备:<a>2台/3台</a></span>
                            <span id="device-two"><a href="../html/device.html">管理</a></span>
                        </div>
                        <div>
                            <p>有效期：<span>2018-5-22</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <!--节点信息-->
            <div class="node-info" >
                <div class="list1" onclick="pull1()">
                        <div>
                            <span>节点列表</span>
                            <span style="font-size: 0.8rem">当前节点</span>
                        </div>
                        <div >
                            <span style="text-align: right;" >
                                <img id="second" src="../images/pull-down.png" height="24px" width="24px">
                            </span>
                            <span id="nodeName" style="text-align: right; padding: 0;">01</span>
                        </div>
                </div>
                <div class="pull-down-first" id="two">
                    <div class="node-list">
                        <div>
                            <label for="list1">节点信息<span class='nodeName1'>01</span></label>
                            <input type="checkbox" checked="checked" id="list1" name="nodeList" onclick="node(this)">
                        </div>
                        <div>
                            <label for="list2">节点信息<span class='nodeName1'>02</span></label>
                            <input type="checkbox" id="list2" name="nodeList" onclick="node(this)">
                        </div>
                        <div>
                            <label for="list3">节点信息<span class='nodeName1'>03</span></label>
                            <input type="checkbox" id="list3" name="nodeList" onclick="node(this)">
                        </div>
                        <div>
                            <label for="list4">节点信息<span class='nodeName1'>04</span></label>
                            <input type="checkbox" id="list4" name="nodeList" onclick="node(this)">
                        </div>
                    </div>
                </div>
            </div>
            <!--设置-->
            <div class="set" >
                <div class="list" onclick="pull2()">
                    <span>设置</span>
                    <span style="text-align: right;" >
                        <img id='third' src="../images/pull-down.png" height="24px" width="24px">
                    </span>
                </div>
                <div class="pull-down-first" id="three">
                    <div class="set-list">
                        <div>
                            <span>开机自启动</span>
                            <span><img id="open" onclick="openImg()" src="../images/off.png"></span>
                        </div>
                        <div>
                            <span>当前版本</span>
                            <span>检查更新</span>
                        </div>
                        <div>
                            <span>socks代理监听</span>
                            <span>192.0.0.0:<input type="text"></span>
                        </div>
                        <div>
                            <p>自动规则地址</p>
                            <textarea rows="4" cols="50"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <footer class="quit clearFix">
                <div class="quit-left">
                    <p>切换账户</p>
                </div>
                <div class="quit-right">
                    <p>退出程序</p>
                </div>
            </footer>
        </div>
    </div>
<script>
    var one = document.getElementById('one');
    var first = document.getElementById('first');
    var two = document.getElementById('two');
    var second = document.getElementById('second');
    var three = document.getElementById('three');
    var third = document.getElementById('third');
    var p = document.getElementById('barP');
    var listText = document.getElementById('nodeName');
    var curN = 360;
    var total = 1024;
    //流量进度条执行函数
    function bar() {
        p.style.width = ((curN / total) * 150)+'px';
    }
    //选择模式
    function seletMD(model) {
        var model1 = document.getElementsByName('model');
        console.log(model1.nextSibling);
        for(var i =0; i<model1.length; i++){
            //nextElementSibling下一个兄弟元素
            var par = model1[i].nextElementSibling;
            //console.log(par);
            if(model1[i] != model){
                model1[i].checked = false;
                par.style.backgroundColor ='#ffffff';
                par.style.color = '#333333';
            }else{
                model1[i].checked = true;
                par.style.backgroundColor = 'red';
                par.style.color = '#ffffff';
            }
        }
    }
    //选择速度
    function speed(speed) {
        var model1 = document.getElementsByName('speed');
        console.log(model1.nextSibling);
        for(var i =0; i<model1.length; i++){
//            var par = model1[i].parentNode;
            var par = model1[i].nextElementSibling;
            //console.log(par);
            if(model1[i] != speed){
                model1[i].checked = false;
                par.style.backgroundColor ='#ffffff';
                par.style.color = '#333333';
            }else{
                model1[i].checked = true;
                par.style.backgroundColor = 'red';
                par.style.color = '#ffffff';
            }
        }
    }
    //关机
    function shutdown(){
        var imgDown = document.getElementById('imgDown');
        if(imgDown.src.indexOf('endRED.png')>0){
            imgDown.src = '../images/end.png';
        }else {
            imgDown.src = '../images/endRED.png';
        }
    }
    //节点选择
    function node(list){
        var nodeList = document.getElementsByName('nodeList');
        for(var i=0; i<nodeList.length; i++){

            var listBox = nodeList[i].parentNode;
            var listChiled = nodeList[i].parentNode.firstElementChild.firstElementChild;
            if(nodeList[i] != list){
                nodeList[i].checked = false;
                listBox.style.color = '#333333';
            }else {
                //为列表节点选中显示出赋值
                listText.innerHTML = listChiled.innerText;
                nodeList[i].checked = true;
                listBox.style.color = 'red';
            }
        }
        if(list.checked != false){

            two.style.display= 'none';
            second.style.transform = "rotate(0deg)";
        }
    }
    //列表隐藏
    function pull() {
        if(one.style.display != 'block'){
            console.log('123')
            one.style.display= 'block';
            first.style.transform = "rotate(180deg)";
            two.style.display= 'none';
            second.style.transform = "rotate(0deg)";
            three.style.display= 'none';
            third.style.transform = "rotate(0deg)";
        }else{
            console.log(456);
            one.style.display= 'none';
            first.style.transform = "rotate(0deg)";
        }
        bar();
    }
    function pull1() {
        if(two.style.display != 'block'){
            two.style.display= 'block';
            second.style.transform = "rotate(180deg)";
            one.style.display= 'none';
            first.style.transform = "rotate(0deg)";
            three.style.display= 'none';
            third.style.transform = "rotate(0deg)";
        }else {
            two.style.display= 'none';
            second.style.transform = "rotate(0deg)";
        }
    }
    function pull2() {
        if(three.style.display != 'block'){
            three.style.display= 'block';
            third.style.transform = "rotate(180deg)";
            one.style.display= 'none';
            first.style.transform = "rotate(0deg)";
            two.style.display= 'none';
            second.style.transform = "rotate(0deg)";
        }else {
            three.style.display= 'none';
            third.style.transform = "rotate(0deg)";
        }
    }
    //控制启动开关
    function openImg() {
        var open = document.getElementById('open');
        if (open.src.indexOf('off.png')>0){
            open.src ='../images/open.png';
        } else {
            open.src = '../images/off.png';
        }
    }
</script>
</body>
</html>